<script setup>
import { onMounted, ref, watch, inject } from 'vue'

const props = defineProps({
    col: {
        type: Object,
        default: {}
    }
})

onMounted(() => {})

const superTable = inject('superTable')

// 定义规则
const tableRules = {
    required: [{ required: true, message: '', trigger: ['change', 'blur'] }],
    number: [{ type: 'number', message: '请输入数字', trigger: ['change', 'blur'] }]
}
const getRules = rules => {
    if (typeof rules === 'string') {
        let rArr = rules.split(',')
        let newRule = []
        rArr.forEach(item => {
            newRule = [...newRule, ...tableRules[item]]
        })
        return newRule
    }
    if (Array.isArray(rules)) {
        return rules
    }
    return []
}
</script>

<template>
    <el-table-column :prop="col.prop" :label="col.label" :width="col.width" :align="col.align" :fixed="col.fixed" :resizable="col.resizable">
        <template #default="scope">
            <el-form-item label="" :prop="`${scope.$index}.${col.prop}`" :rules="getRules(col.typeConfig?.rules)">
                <template v-if="col.type === 'text'">{{ scope.row[col.prop] }}</template>

                <template v-if="col.type === 'input'">
                    <el-input
                        v-model="scope.row[col.prop]"
                        :disabled="col.disabled"
                        @change="superTable.handleRowChange('input', scope.$index, col.prop, scope.row)"
                    />
                </template>

                <template v-if="col.type === 'number'">
                    <el-input-number
                        v-model="scope.row[col.prop]"
                        :disabled="scope.row[`_${col.prop}_disabled`] ?? col.typeConfig?.disabled"
                        :min="col.typeConfig?.min"
                        :max="col.typeConfig?.max"
                        :step="col.typeConfig?.step"
                        @change="superTable.handleRowChange('number', scope.$index, col.prop, scope.row)"
                    />
                </template>

                <template v-if="col.type === 'link'">
                    <a class="link" @click="superTable.handleRowChange('link', scope.$index, col.prop, scope.row)">{{ scope.row[col.prop] }}</a>
                </template>

                <template v-if="col.type === 'select'">
                    <el-select
                        v-model="scope.row[col.prop]"
                        :disabled="col.disabled"
                        @change="superTable.handleRowChange('select', scope.$index, col.prop, scope.row)"
                    >
                        <el-option v-for="item in col.typeConfig?.options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>

                <template v-if="col.type === 'operate'">
                    <el-button-group>
                        <el-button type="primary" @click="superTable.handleRowChange('operateEdit', scope.$index, col.prop, scope.row)">编辑</el-button>
                        <el-button type="danger" @click="superTable.handleRowChange('operateDelete', scope.$index, col.prop, scope.row)">删除</el-button>
                    </el-button-group>
                </template>

                <template v-if="col.type">
                    <slot v-if="col.type" :name="col.type" :scope="scope" :col="col"></slot>
                </template>
            </el-form-item>
            <slot name="children"></slot>
        </template>
    </el-table-column>
</template>

<style scoped lang="scss">
.link {
    color: #409eff;
    cursor: pointer;
    &:hover {
        color: #66b1ff;
        text-decoration: underline;
    }
}
</style>
